import React from 'react';
import { Modal } from 'antd-mobile';
import './index.css';

class RainAnalysis extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            scrollX: 0
        }
        this.labelRef = React.createRef();
        this.wrapperRef = React.createRef();
        this.timer = null;
        this.distance = 0;
    }

    componentDidMount(){
        this.initMarquee();
    }

    //文字轮播
    initMarquee(){
        const wrapperWidth = this.wrapperRef.current.clientWidth; 
        const textWidth = this.labelRef.current.clientWidth; 
        this.timer = setInterval(() => {
            if(this.distance <= -textWidth){ this.distance = wrapperWidth; }
            this.distance--;
            this.setState({ scrollX: this.distance });
        }, (50));
    }

    componentWillUnmount(){
        clearInterval(this.timer);
        this.distance = 0;
        this.setState = (state, callback) => {
            return ;
        }
    }

    render(){
        const { aText, aRainText, isLive, showModal, showTipsModal, closeTipsModal } = this.props;
        const { scrollX } = this.state;
        return (
            <React.Fragment>
                <div className='tips'>
                    <div className='horn'>
                        <img src={require('../../assets/images/home/index/horn.png')} alt="loading" />
                    </div>
                    <div className='text' ref={this.wrapperRef}>
                        <div className='marquee-label' ref={this.labelRef} style={{transform:`translateX(${scrollX}px)`}}>
                            {aText}
                        </div>
                    </div>
                    <div className='tips-btn' onClick={() => showTipsModal()}>
                        <div className='book'>
                            { 
                                isLive ? <img src={require('../../assets/images/home/index/book.png')} alt="loading" />
                                : <img src={require('../../assets/images/home/predict/anayis.png')} alt="loading" />
                            }
                        </div>
                        <div className='more'>{isLive ? '雨情分析' : '预报分析' }</div>
                        <div className='arrow'><img src={require('../../assets/images/home/index/arrow.png')} alt="loading" /></div>
                    </div>
                </div>
                <Modal 
                    visible={showModal}
                    transparent
                    maskClosable={true}
                    closable={true}
                    onClose={() => closeTipsModal()}
                    title={isLive ? '雨情分析' : '预报分析'}
                >
                    <div className='info-text'>{aRainText}</div>
                </Modal>
            </React.Fragment>
        )
    }
}

export default RainAnalysis;